<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
</head>
<body>
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div class="iq-sidebar-logo d-flex justify-content-between">
            <a href="index.html">
                <img src="../src/images/logo.gif" class="img-fluid" alt="">
                <span>DaLao</span>
            </a>
            <div class="iq-menu-bt align-self-center">
                <div class="wrapper-menu">
                    <div class="line-menu half start"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu half end"></div>
                </div>
            </div>
        </div>
        <div id="sidebar-scrollbar">
            <div id="menu"></div>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <div class="iq-sidebar-logo">
                <div class="top-logo">
                    <a href="index.html" class="logo">
                        <img src="../src/images/logo.gif" class="img-fluid" alt="">
                        <span>DaLao</span>
                    </a>
                </div>
            </div>
            <div class="navbar-breadcrumb">
                <h5 class="mb-0">聊天室</h5>
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">聊天</li>
                    </ul>
                </nav>
            </div>
           <div id="navigation"></div>
        </div>
    </div>
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="iq-card">
                        <div class="iq-card-body chat-page p-0">
                            <div class="chat-data-屏蔽">
                                <div class="row">
                                    <div class="col-lg-3 chat-data-left scroller">
                                        <div class="chat-search pt-3 pl-3">
                                            <div class="d-flex align-items-center">
                                                <div class="chat-profile mr-3">
                                                    <img src="../src/images/user/1.jpg" alt="chat-user" class="avatar-60 ">
                                                </div>
                                                <div class="chat-caption">
                                                    <h5 class="mb-0">大佬</h5>
                                                    <p class="m-0">java后端开发工程师</p>
                                                </div>
                                                <button type="submit" class="close-btn-res p-3"><i
                                                        class="ri-close-fill"></i></button>
                                            </div>
                                            <div id="user-detail-popup" class="scroller">
                                                <div class="user-profile">
                                                    <button type="submit" class="close-popup p-3"><i
                                                            class="ri-close-fill"></i></button>
                                                    <div class="user text-center mb-4">
                                                        <a class="avatar m-0">
                                                            <img src="../src/images/user/1.jpg" alt="avatar">
                                                        </a>
                                                        <div class="user-name mt-4"><h4>大佬</h4></div>
                                                        <div class="user-desc"><p>java后端开发工程师</p></div>
                                                    </div>
                                                    <hr>
                                                    <div class="user-detail text-left mt-4 pl-4 pr-4">
                                                        <h5 class="mt-4 mb-4">关于</h5>
                                                        <p>长期以来，读者会分心，这是一个公认的事实

                                                           是红色的。</p>
                                                        <h5 class="mt-3 mb-3">状态</h5>
                                                        <ul class="user-status p-0">
                                                            <li class="mb-1"><i
                                                                    class="ri-checkbox-blank-circle-fill text-success pr-1"></i><span>在线</span>
                                                            </li>
                                                            <li class="mb-1"><i
                                                                    class="ri-checkbox-blank-circle-fill text-warning pr-1"></i><span>离开</span>
                                                            </li>
                                                            <li class="mb-1"><i
                                                                    class="ri-checkbox-blank-circle-fill text-danger pr-1"></i><span>请勿打扰</span>
                                                            </li>
                                                            <li class="mb-1"><i
                                                                    class="ri-checkbox-blank-circle-fill text-light pr-1"></i><span>离线</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chat-searchbar mt-4">
                                                <div class="form-group chat-search-data m-0">
                                                    <input type="text" class="form-control round" id="chat-search"
                                                           placeholder="搜索">
                                                    <i class="ri-search-line"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="chat-sidebar-channel scroller mt-4 pl-3">
                                            <h5 class="">公共频道</h5>
                                            <ul class="iq-chat-ui nav flex-column nav-pills">
                                                <li>
                                                    <a data-toggle="pill" href="#chatbox1">
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar mr-3">
                                                                <img src="../src/images/user/05.jpg" alt="chatuserimage"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <div class="chat-sidebar-name">
                                                                <h6 class="mb-0">团队讨论</h6>
                                                                <span>Lorem Ipsum是</span>
                                                            </div>
                                                            <div class="chat-meta float-right text-center mt-2">
                                                                <div class="chat-msg-counter bg-primary text-white">20
                                                                </div>
                                                                <span class="text-nowrap">05 分钟</span>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a data-toggle="pill" href="#chatbox2">
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar mr-3">
                                                                <img src="../src/images/user/06.jpg" alt="chatuserimage"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <div class="chat-sidebar-name">
                                                                <h6 class="mb-0">公告</h6>
                                                                <span>这个星期天我们</span>
                                                            </div>
                                                            <div class="chat-meta float-right text-center mt-2">
                                                                <div class="chat-msg-counter bg-primary text-white">10
                                                                </div>
                                                                <span class="text-nowrap">10 分钟</span>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                            <h5 class="mt-3">私人频道</h5>
                                            <ul class="iq-chat-ui nav flex-column nav-pills">
                                                <li>
                                                    <a data-toggle="pill" href="#chatbox3">
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar mr-3">
                                                                <img src="../src/images/user/07.jpg" alt="chatuserimage"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-warning"></i></span>
                                                            </div>
                                                            <div class="chat-sidebar-name">
                                                                <h6 class="mb-0">设计师</h6>
                                                                <span>有很多 </span>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a data-toggle="pill" href="#chatbox4">
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar mr-3">
                                                                <img src="../src/images/user/08.jpg" alt="chatuserimage"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <div class="chat-sidebar-name">
                                                                <h6 class="mb-0">开发商</h6>
                                                                <span>传闻</span>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                            <h5 class="mt-3">直接消息</h5>
                                            <ul class="iq-chat-ui nav flex-column nav-pills">
                                                <li>
                                                    <a data-toggle="pill" href="#chatbox6">
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar mr-3">
                                                                <img src="../src/images/user/10.jpg" alt="chatuserimage"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-dark"></i></span>
                                                            </div>
                                                            <div class="chat-sidebar-name">
                                                                <h6 class="mb-0">保罗·莫利夫</h6>
                                                                <span>翻译依据</span>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a data-toggle="pill" href="#chatbox7">
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar mr-3">
                                                                <img src="../src/images/user/05.jpg" alt="chatuserimage"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <div class="chat-sidebar-name">
                                                                <h6 class="mb-0">佩奇·特纳</h6>
                                                                <span>Lorem Ipsum哪个</span>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-lg-9 chat-data p-0 chat-data-right">
                                        <div class="tab-content">
                                            <div class="tab-pane fade active show" id="default-屏蔽" role="tabpanel">
                                                <div class="chat-start">
                                                    <span class="iq-start-icon text-primary"><i
                                                            class="ri-message-3-line"></i></span>
                                                    <button id="chat-start" class="btn bg-white mt-3">开始对话!
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox1" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Team Discussions</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/05.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Nik Jordan</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Nik</div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Male
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);"
                                                               class="chat-icon-phone iq-bg-primary">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);"
                                                               class="chat-icon-video iq-bg-primary">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);"
                                                               class="chat-icon-delete iq-bg-primary">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown iq-bg-primary">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer pr-0"
                                                   id="dropdownMenuButton02" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton02">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                       <button type="submit"
                                                               class="btn btn-primary d-flex align-items-center p-2"><i
                                                               class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                               class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox2" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3  pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Announcement</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/06.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Mark Jordan</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Atlanta, USA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Mark
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Female
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton01" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton01">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i> 固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox3" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Designer</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/07.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Paige Turner</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">pai</div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Male
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton1">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                    Type your message                                                        aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox4" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Developer</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/08.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Barb Ackue</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Babe
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Feale
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton2">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox5" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/09.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Testing Team</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/09.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Peta Saireya</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Pet</div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Female
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton3">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/09.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/09.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/09.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox6" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/10.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Paul Molive</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/10.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Paul Molive</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Pau</div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Male
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton4">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/10.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/10.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/10.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox7" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Paige Turner</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/05.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Paige Turner</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Pai</div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Feale
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton5" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton5">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/05.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox8" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Barb Ackue</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/06.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Barb Ackue</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Babe
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Female
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton6" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton6">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/06.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox9" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Maya Didas</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/07.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Maya Didas</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Babe
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Male
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton7" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton7">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/07.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="chatbox10" role="tabpanel">
                                                <div class="chat-head">
                                                    <header class="d-flex justify-content-between align-items-center bg-white pt-3 pl-3 pr-3 pb-3">
                                                        <div class="d-flex align-items-center">

                                                            <div class="avatar chat-user-profile m-0 mr-3">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-50 ">
                                                                <span class="avatar-status"><i
                                                                        class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                                            </div>
                                                            <h5 class="mb-0">Monty Carlo</h5>
                                                        </div>
                                                        <div class="chat-user-detail-popup scroller">
                                                            <div class="user-profile text-center">
                                                                <button type="submit" class="close-popup p-3"><i
                                                                        class="ri-close-fill"></i></button>
                                                                <div class="user mb-4">
                                                                    <a class="avatar m-0">
                                                                        <img src="../src/images/user/08.jpg" alt="avatar">
                                                                    </a>
                                                                    <div class="user-name mt-4"><h4>Monty Carlo</h4>
                                                                    </div>
                                                                    <div class="user-desc"><p>Cape Town, RSA</p></div>
                                                                </div>
                                                                <hr>
                                                                <div class="chatuser-detail text-left mt-4">
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Nik Name:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Babe
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Tel:</div>
                                                                        <div class="col-6 col-md-6 text-right">072 143
                                                                            9920
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Date Of
                                                                            Birth:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">July 12,
                                                                            1989
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Gender:</div>
                                                                        <div class="col-6 col-md-6 text-right">Female
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="row">
                                                                        <div class="col-6 col-md-6 title">Language:
                                                                        </div>
                                                                        <div class="col-6 col-md-6 text-right">Engliah
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="chat-header-icons d-flex">
                                                            <a href="javascript:void(0);" class="chat-icon-phone">
                                                                <i class="ri-phone-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-video">
                                                                <i class="ri-vidicon-line"></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="chat-icon-delete">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </a>
                                                            <span class="dropdown">
                                                <i class="ri-more-2-line cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
                                                   id="dropdownMenuButton8" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false" role="menu"></i>
                                                <span class="dropdown-menu dropdown-menu-right"
                                                      aria-labelledby="dropdownMenuButton8">
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-thumb-tack"
                                                          aria-hidden="true"></i>  固定到顶部</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-trash-o" aria-hidden="true"></i> 删除聊天</a>
                                                  <a class="dropdown-item" href="JavaScript:void(0);"><i
                                                          class="fa fa-ban" aria-hidden="true"></i> 屏蔽</a>
                                                </span>
                                              </span>
                                                        </div>
                                                    </header>
                                                </div>
                                                <div class="chat-content scroller">
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:45</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>How can we help? We're here for you! 😄</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:48</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Hey John, I am looking for the best admin
                                                                    template.</p>
                                                                <p>Could you please help me to find it out? 🤔</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:49</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Absolutely!</p>
                                                                <p>Metorik Dashboard is the responsive bootstrap 4 admin
                                                                    template.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:52</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Looks clean and fresh UI.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:53</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Thanks, from ThemeForest.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat chat-left">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/08.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:54</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>I will purchase it for sure. 👍</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="chat">
                                                        <div class="chat-user">
                                                            <a class="avatar m-0">
                                                                <img src="../src/images/user/1.jpg" alt="avatar"
                                                                     class="avatar-35 ">
                                                            </a>
                                                            <span class="chat-time mt-1">6:56</span>
                                                        </div>
                                                        <div class="chat-detail">
                                                            <div class="chat-message">
                                                                <p>Okay Thanks..</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chat-footer p-3 bg-white">
                                                    <form class="d-flex align-items-center"
                                                          action="javascript:void(0);">
                                                        <div class="chat-attagement d-flex">
                                                            <a href="javascript:void(0);"><i class="fa fa-smile-o pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                            <a href="javascript:void(0);"><i class="fa fa-paperclip pr-3"
                                                                                            aria-hidden="true"></i></a>
                                                        </div>
                                                        <input type="text" class="form-control mr-3"
                                                               placeholder="输入您的消息">
                                                        <button type="submit"
                                                                class="btn btn-primary d-flex align-items-center p-2"><i
                                                                class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                                                class="d-none d-lg-屏蔽 ml-1">发送</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<!-- Footer -->
<div id="bottom"></div>
<!-- Footer END -->
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/popper.min.js"></script>
<script src="../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../src/js/waypoints.min.js"></script>
<script src="../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../src/js/lottie.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../src/js/custom.js"></script>
<script>
   $(function () {
      $("#menu").load("menus.html");
      $("#navigation").load("navigation-bar.html");
      $("#bottom").load("bottom-bar.html");
   });
</script>
</html>